<template>
	<div style="position: relative; z-index: 0; background-color:#171717 ;">

		<!-- 根据 isLoading 的值显示加载中的状态或数据 -->
		<div style="width: 98%; margin-left:1%;margin-top: 2%; background-color:#171717 ;">
			<div class="mn_top">
				<div style="display: inline-block; color: #fff;font-size: 30px;">管理云服务器</div>
				<span style="display: inline-block;margin-left: 20px;color: #00afe0;cursor: pointer;"
					@click="toHome()">我的产品
				</span>
				<span style="color: #fff;padding: 0 5px;">&gt</span>
				<span style="display: inline-block;color: #fff;">管理云服务器 </span>
			</div>

			<div class="action" style="background-color: #171717; margin-top: 20px;border-radius: 5px;">
				<el-button class="control" style="margin-left: 2%;" @click="power('start')" v-loading="isClick"
					:disabled="isClick">开机</el-button>
				<el-button class="control" @click="power('compel_restart')" v-loading="isClick"
					:disabled="isClick">重启</el-button>
				<el-button class="control" @click="power('compel_shut')" v-loading="isClick"
					:disabled="isClick">关机</el-button>
			</div>

			<div class="mn_main"
				style="position: relative;width: 90%; margin-top: 20px; border-radius: 5px; background-color: #171717;">
				<div id="main_top">
					<div class="scro message" style="border-bottom: 2px solid #00afe0;margin-left: 20px;"
						@click="toPage('controll')">信息与监控</div>
					<div class="scro disk" @click="toPage('elasticity')">弹性云盘</div>
					<div class=" scro disk" @click="toPage('backups')">备份还原</div>
					<div class=" scro port " @click=" toPage('nat')">NAT端口映射</div>
					<div class=" scro wall" @click="toPage('firewall')">防火墙规则</div>
					<div class="scro system" @click="toPage('system')">更换或重装系统</div>
					<div class="scro renew" @click="toPage('renew')">续费</div>
				</div>

				<div class="main_left">
					<div style="box-shadow: 0px 0px 5px #fff;border-radius: 5px; padding: 2% 0;">
						<div id="msg">
							<h3 style="color: #fff;margin-left: 20px;">服务器信息</h3>
							<div style="color: #fff;">
								<div class="msg">服务器ID：{{mechineList.serverId}}</div>
								<div class="msg">标签：
									<span
										style="background-color: #ffffff;color: #000000;">{{mechineList.tag.fillings}}</span>
								</div>
								<div class="msg">运行状态：{{mechineList.runStatus}}</div>
								<div class="msg">节点：<span v-for="(item) in mechineList.nodes"
										style="padding: 0 5px;">{{item}}</span></div>
								<div class="msg">到期时间：{{mechineList.expireTime}}</div>
							</div>
						</div>
						<div id="link">
							<div class="msg" style="display: flex; margin-top: 20px; font-size: 14px;font-weight: 700;">
								远程连接
							</div>
							<div>
								<div class="msg">远程连接地址 (RDP/SSH)：{{mechineList.remoteConnection.remoteLinkAddress}}
								</div>
								<div class="msg">远程用户名：{{mechineList.remoteConnection.remoteUserName}}</div>
								<div class="msg">远程密码：{{mechineList.remoteConnection.remotePassword}}</div>
							</div>
						</div>

						<div id="configure" style="margin-bottom: 20px;">
							<div class="msg" style="display: flex; margin-top: 20px; font-size: 14px;font-weight: 700;">
								配置信息
							</div>
							<div>
								<div class="msg">套餐：{{mechineList.settingInfo.package}}</div>
								<div class="msg">配置：{{mechineList.settingInfo.settings}}</div>
								<div class="msg">系统：{{mechineList.settingInfo.sysName}}</div>
							</div>
						</div>
					</div>

					<div
						style="color: #fff;margin-top: 5%; padding:2% 2% ;box-shadow: 0px 0px 5px #fff;border-radius: 5px;">
						<h3>常见问题&教程</h3>
						<div>→3分钟读懂宝塔建站方法</div>
						<div>→安装宝塔面板教程-若已预装该系统可忽略</div>
						<div>→LXC云服务器宝塔安装NGINX导致502错误内存CPU爆满的解决方法</div>

						<div style="margin-top: 2%;">更多请看 <a href="#" @click="toHelp()"
								style="margin-left: 1%;">篮竹云百科</a>
						</div>
						<div>或者在售后Q群xxxxxxxxxx中咨询</div>
					</div>
				</div>

				<div class="main_right">
					<div
						style="box-shadow: 0px 0px 5px #fff;color: #fff;margin-top: 5%; padding:1% 2% ;border-radius: 5px;">
						<h3 style="color: #fff;margin-left: 20px;">NAT端口映射管理</h3>
						<div style="margin-left: 18px;font-size: 14px;">本服务器没有配置公网IP地址，您可以使用NAT端口映射将最多10个端口映射至公网以实现访问。
						</div>
						<div style="margin-top: 20px; margin-left: 18px;">
							<span class="mr_title" style="display: inline-block;width: 45%;height: 40px;">对外地址</span>
							<span class="mr_title" style="display: inline-block;width: 30%;height: 40px;">标签</span>
							<span class="mr_title" style="display: inline-block;width: 20%;height: 40px;">内网端口</span>
						</div>
						<div v-for="(item,index) in mechineList.nat" style=" margin-left: 18px;">
							<span class="mr_title"
								style="display: inline-block;width: 45%;height: 40px;">{{item.exteriorPort}}
								&nbsp;
								<a href="#" @click="copyToClipboard()"><b style="text-decoration:none">复制</b></a>
							</span>
							<span class=" mr_title"
								style="display: inline-block;width: 30%;height: 40px;">{{item.natAclName}}</span>
							<span class="mr_title"
								style="display: inline-block;width: 20%;height: 40px;">{{item.interiorPort}}</span>
						</div>
						<button
							style="color: #fff; border-radius: 5px; box-shadow: 0 0 5px #fff;background-color: #171717; text-align: center;height: 25px;line-height: 25px;margin-top: 20px;margin-left: 18px;font-size: 14px;padding: 0 10px;">
							<div style="cursor: pointer;" @click="toPage('nat')">＋端口设置</div>
						</button>
						<div style="margin:20px 0 40px 18px;font-size: 12px;">如宝塔面板: 创建内网端口为8889的映射,即可用外网地址进入服务器
						</div>
					</div>
					<div
						style="box-shadow: 0px 0px 5px #fff;color: #fff;margin-top: 5%; padding:1% 2% ;border-radius: 5px;">
						<h3 style="color: #fff;margin-left: 20px;">公网IP列表</h3>
						<div style="margin-left: 18px;font-size: 14px;">您可以添加独立IP地址实现访问并独享DDos防御。</div>
						<div v-for="(item,index) in mechineList.pub_ip" style="margin: 20px 0 0 10px;">
							<div>
								{{item}}
							</div>
						</div>
						<button
							style="color: #fff; border-radius: 5px; box-shadow: 0 0 5px #fff;background-color: #171717; text-align: center;height: 25px;line-height: 25px;margin:20px 0 20px 18px;font-size: 14px;padding: 0 10px;">

							<div @mouseover="showTip=true" @mouseleave="showTip=false" :disabled="true">＋添加公网IP
								<div v-show="showTip" class="tooltip">该功能暂时未开放</div>
							</div>

						</button>
					</div>
					<div
						style="box-shadow: 0px 0px 5px #fff;color: #fff;margin-top: 5%; padding:1% 2% ;border-radius: 5px;">
						<h3 style="color: #fff;margin-left: 20px;">实时监控</h3>
						<div>
							<div style="display: initial; margin-left: 5%;position: sticky;">
								<div id="main2" ref="categoryChart"
									style="width: 150px;height: 150px;position: sticky;">
									<div
										style="position: absolute;top: 0;z-index: 1000000;top: 65px;width: 150px;text-align: center;background: transparent; color: #fff;">
									</div>
								</div>
							</div>
						</div>
						<div
							style="position: relative; bottom:90px; left: 55% ;width:  75%; background-color: transparent;">

							<div style="margin-bottom: 2%;background-color: transparent;">
								<span>网络：</span>
								<span style="display: inline-block; width: 20%;padding-left: 2px;margin: 0 1%;">↑
									{{this.monitor_in}}B/s</span>
								<span style="display: inline-block; width: 20%;padding-left: 2px;margin: 0 1%;">↓
									{{this.monitor_out}}B/s</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios';
	import * as echarts from 'echarts';
	import {
		getMonitorData,
		getMachineInfo,
		controlPower
	} from '../../../api/work.js'

	export default {
		name: 'Index',
		data() {
			return {
				machineId: '',
				showTip: '',
				usedMemory: '18',
				totalMemory: '100',
				isClick: false,
				cpu: 10.61, //CPU
				memory: 788.2, //内存
				mechineList: [],
				responseData: null, // 存储请求成功后的数据
				monitor_data_list: [],
				use_monitor_data: {},
				memory_percent: '', // 监控百分比
				monitor_in: '', // 上行
				monitor_out: '', //下行


			}
		},
		mounted() {
			this.machineId = this.$route.query.data
			this.getMechine(this.$route.query.data)
			this.getMonitorData0()
			this.start()
			setTimeout(() => {
				this.toCanvas1("#circle1", 14);
			}, 1000)

			// 10s执行一次
			// var timer = setInterval(this.getMonitorData0(), 5000);

		},
		methods: {
			start() {
				this.timer = setInterval(this.getMonitorData0(), 10000); // 注意: 第一个参数为方法名的时候不要加括号;
			},
			over() {
				clearInterval(this.timer);
			},
			toCanvas1(id, progress) {
				let myChart = echarts.init(document.querySelector('#main2'))
				let option = {
					series: [{
						type: 'gauge',
						progress: {
							show: true,
							width: 10,
							color: "#fff",
							itemStyle: {
								color: "#ff9"
							}
						},
						axisLine: {
							lineStyle: {
								width: 10
							}
						},
						axisTick: {
							show: false
						},
						splitLine: {
							show: false
						},
						pointer: {
							show: false
						},
						axisLabel: {
							show: false
						},
						detail: {
							show: true,
							formatter: '{value}%', // 设置百分比显示
							offsetCenter: [0, '50%'], // 调整文本位置
							textStyle: {
								fontSize: 20,
								color: "#fff"
							}
						},
						data: [{
							value: this.memory_percent
						}]
					}]
				}
				option && myChart.setOption(option);
			},

			// 获取监控数据
			getMonitorData0() {
				// 返回数据较长，以最后一条数据显示
				// 获取监控数据
				let data = {
					EncryptRobotId: this.machineId
				}
				getMonitorData(data).then(res => {
					console.log("获取监控数据")
					console.log(res)
					if (!res.data) {
						this.memory_percent = '0'
						this.monitor_in = '0'
						this.monitor_out = '0'
					} else {
						this.monitor_data_list = res.data
						this.use_monitor_data = this.monitor_data_list[this.monitor_data_list.length - 1]
						// 获取内存百分比
						this.memory_percent = JSON.parse(this.use_monitor_data.Cpu).value
						// 获取上行、下行速率
						this.monitor_in = JSON.parse(this.use_monitor_data.Network).in
						this.monitor_out = JSON.parse(this.use_monitor_data.Network).out
					}



				})
			},


			getMechine(e) {
				this.isLoading = true; // 开始请求时显示加载中
				localStorage.setItem("Mechine_id", e);
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(23, 23, 23, 0.7)'
				});
				// 获取机器信息
				let data = {
					encryptRobotId: e
				}
				getMachineInfo(data).then(response => {
						// 请求成功，处理返回的数据
						if (response.runStatus === 0) {
							response.runStatus = '运行中'
						} else {
							response.runStatus = '未运行'
						}
						this.mechineList = response
						console.log("机器信息")
						console.log(this.mechineList)
						this.isLoading = false; // 请求成功后隐藏加载中
						loading.close();
					})
					.catch(error => {
						// 请求失败，处理错误信息
						loading.close();
						this.$alert('访问出错，请重新访问或联系管理员', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								this.$message({
									type: 'info',
									message: `访问出错，请重新访问或联系管理员`
								});
							}
						});

					});

			},
			copyToClipboard() {
				navigator.clipboard.writeText(this.portList[0].ip).then(() => {
					console.log('复制成功');
				}).catch(err => {
					console.log('复制失败', err);
				});
			},


			power(e) {
				this.isClick = true
				let data = {
					encrypt_robot_id: this.$route.query.data,
					type: e,
					user_id: localStorage.getItem('userid')
				}
				// 控制开关机
				controlPower(data).then(res => {
						if (res.message === '签名验证失败') {
							this.$message.warning('请求过于频繁， 请稍后重试')
						} else {
							// 请求成功，处理返回的数据
							this.$message({
								message: res.message,
								type: 'success',
							});
						}
						this.isClick = false
					})
					.catch(error => {
						// 请求失败，处理错误信息
						this.error = error;
						this.$message.warning('出现未知错误, 请联系管理员')
					});
			},

			toHome() {
				this.$router.push('/demo/mygoods')
			},
			toHelp() {
				this.$router.push('/demo/help_document')
			},
			toPage(e) {
				var pageUrl = "/demo/" + e
				this.$router.push({
					path: pageUrl,
					query: {
						data: this.$route.query.data
					}
				})
			},

		},
		beforeDestroy() {
			clearInterval(this.timer);
		},
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
		background-color: #171717;
	}

	a {
		text-decoration: none !important;
		color: #3EB6C2;
		border: none;
	}

	.mn_top {
		height: 60px;
		margin-top: 20px;
		background-color: #171717;
		line-height: 20px;
		border-radius: 5px;
	}

	.main_left {
		position: relative;
		display: grid;
		background-color: transparent;
		width: 48%;
		margin-left: 1%;
		margin-top: 1%;
	}

	.main_right {
		position: relative;
		background-color: transparent;
		top: -800px;
		left: 50%;
		width: 48%;
		margin-left: 1%;
	}

	.msg {
		color: #fff;
		/* border: 1px solid #646464; */
		width: 90%;
		margin-left: 5%;
		padding: 5px 10px;
	}

	.el-loading-spinner .circular {
		height: 30px !important;
	}

	.control {
		display: inline-block;
		cursor: pointer;

		margin: 10px 10px;
		padding: 7px 30px;

		background-color: #2f2f2f;
		border-radius: 6px;
		box-shadow: 0 0 5px #ffffff;
		color: #fff;

	}

	.scro {
		display: inline-block;
		cursor: pointer;
		font-size: 14px;
		font-weight: 700;
		padding: 8px 12px;

		color: #fff;
	}

	.mr_title {
		font-size: 14px;
		font-weight: 700;
		border: 1px solid #a3a3a3;
		padding-left: 10px;
		line-height: 40px;
	}

	.progress-bar {
		display: inline-block;
		width: 100%;
		box-sizing: border-box;
		margin-top: 12px;
		margin-bottom: 18px;
		background-color: transparent;
	}

	.progress-bar-outer {
		height: 5px;
		width: 50%;
		border-radius: 15px;
		background-color: #e1f0ff;
		align-items: center;
		display: flex;
	}

	.progress-text {
		font-size: 12px;
		display: inline-block;
		vertical-align: middle;
		position: absolute;
		margin-left: 60%;
	}

	.progress-bar-inner {
		border-radius: 15px 15px 15px 15px;
		height: 100%;
		transition: width 0.6s ease;
		text-align: right;
		line-height: 80%;
	}

	.tooltip {
		position: absolute;
		top: 460px;
		left: 150px;
		background: #171717;
		color: #fff;
		border-radius: 5px;
		padding: 5px 10px;
		border: 1px solid #ccc;
	}
</style>